import React, { Component } from 'react';
import {
  View, ScrollView, Image, Dimensions, Alert, DeviceEventEmitter,
  TouchableHighlight,
} from 'react-native';
import produce from 'immer';
import {
  Text, Textarea, Badge,
} from 'native-base';
import Icon from 'react-native-vector-icons/AntDesign';
import ZlstIcon from '../../../../components/zlst-icons';
import Theme from '../../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../../utils/util-method';
import {
  FormTakephoto,
  FormSearchChoiceNoHeader,
  CheckBox,
  FormSelect,
  FormSearchKeyword,
  FormSearchChoiceMore,
} from '../../../../components';
import * as incidentServer from '../../../../services/incidentRequest';
import * as todoService from '../../../../services/todo';
import styles from './maintainComplete.styles';
import { commonMethods } from '../../../../utils';
import { host } from '../../../../../app.json';
import PositionItem from './incidentPosition';
import SelectPart from '../../../../components/selectIncidentpart';

const deviceWidth = Dimensions.get('window').width;
class MaintainComplete extends Component {
  // pageData = {
  //   failureCause: '', // 故障原因
  //   description: '', // 处理过程
  //   remainingProblems: '', // 遗留问题
  // }
  searchUri = ''

  failurePic = '';

  maintainChangeParts = null

  type = 'radio'

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      modalChoiceMoreVisible: false,
      keywordModalVisible: false,
      showRemianProblem: false,
      changePrats: true, // 零部件更换 换上换下
      showSelectIncidentPart: false, // 展示故障位置选择
      selectedPartList: [],
      selectedMaterial: {},
      showSelectMaterialList: false,
      hasChoicePart: false, // 是否选择了故障位置
      // showSelect: false,
      images: [],
      billCode: '无', // 工作票号
      description: '', // 处理过程
      failureCause: '', // 故障原因补充说明
      failureCauseId: '', // 故障原因Id
      failureCauseName: '', // 故障原因名称
      processId: '', // 处理过程id
      processName: '', // 处理过程名称
      maintPerson: '', // 维修责任人
      maintPersonName: '', // 维修责任人姓名
      maintTeamMember: '', // 维修团队
      maintTeamMembername: '', // 维修团队名称
      maintOrgId: '', // 维修责任班组
      remainingProblems: '', // 遗留问题
      listAccyreplacement: [],
    };
  }

  componentWillMount() {
    // DeviceEventEmitter.emit('showLoading', true);
    this.maintainChangeParts = DeviceEventEmitter.addListener('maintainChangeParts', this._maintainChangeParts);
    DeviceEventEmitter.addListener('toQrcode', this.toQrcode);

    this._querySaveData();
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('toQrcode');
    if (this.DeviceEventEmitter) {
      this.DeviceEventEmitter.remove();
      this.DeviceEventEmitter = null;
    }
  }

  /**
   * 换上换下 监听事件
  */
  _maintainChangeParts = (datas) => { // 换上换下 监听事件
    const mlist = [...this.state.listAccyreplacement];
    datas.upParts.forEach((data, index) => {
      const upPart = {
        ...data,
        action: '5', // 换上
        changeQty: data.num, // 数量
        equipmentId: this.props.equipmentId, // 设备ID
      };
      let downPart;
      if (datas.downParts && datas.downParts.length > index) {
        downPart = {
          ...datas.downParts[index],
          action: '6', // 换下
          changeQty: data.num, // 数量
          equipmentId: this.props.equipmentId, // 设备ID
        };
      }

      console.log('change parts data:', upPart, downPart);
      // this.setState(prevState => {
      //   // 查找是否又相同的物料ID
      //   // const obj = prevState.listAccyreplacement.find(item => item.materialId === upPart.materialId);

      //   const obj = prevState.listAccyreplacement.find(item => item.lotCode === upPart.lotCode && item.action === '5');
      //   const list = [...prevState.listAccyreplacement];

      //   if (obj) { // 找到同一物料ID 数量++
      //     obj.changeQty = (+obj.changeQty) + (+upPart.changeQty);
      //   } else { // 不是同一物料，直接push
      //     list.push(upPart);
      //   }

      //   // 有换下部分 push进数组
      //   if (downPart) {
      //     list.push(downPart);
      //   }

      //   return ({
      //     listAccyreplacement: [...list],
      //   });
      // });

      const obj = mlist.find(item => item.lotCode === upPart.lotCode && item.action === '5');

      if (obj) { // 找到同一物料ID 数量++
        obj.changeQty = (+obj.changeQty) + (+upPart.changeQty);
      } else { // 不是同一物料，直接push
        mlist.push(upPart);
      }

      // 有换下部分 push进数组
      if (downPart) {
        const obj1 = mlist.find(item => item.splitItemId === downPart.splitItemId && item.lotCode === downPart.lotCode && item.action === '6');
        if (!obj1) {
          mlist.push(downPart);
        }
        // mlist.push(downPart);
      }
    });
    this.setState({ listAccyreplacement: [...mlist] });
  }

  /**
   * 查询保存的维修完成的数据
  */
  _querySaveData = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const resp = await incidentServer.getCompeleteDraft(this.props.id);
      console.log('维修完成草稿信息:', resp);
      DeviceEventEmitter.emit('showLoading', false);
      const flag = commonMethods.isEmpty(resp.data); // 判断后台返回值是否是空

      // 人员信息
      const data = {
        maintPerson: flag ? global.user.staff.id
          : resp.data.maintPerson || global.user.staff.id,
        maintPersonName: flag ? global.user.staff.name
          : resp.data.maintPersonName || global.user.staff.name,
        maintTeamMembername: flag ? global.user.staff.name
          : resp.data.maintTeamMembername || global.user.staff.name,
        maintTeamMember: flag ? global.user.staff.id
          : resp.data.maintTeamMember || global.user.staff.id,
        maintOrgId: flag ? global.user.organization.id
          : resp.data.maintOrgId || global.user.organization.id,
      };
      // 其他信息
      let otherInfo = {};
      let changePrats = flag;
      let showRemianProblem = flag;

      const selectedPartList = flag ? [] : resp.data.failurePositions || [];

      if (!flag) {
        otherInfo = {
          billCode: resp.data.billCode,
          failureCause: resp.data.failureCause,
          description: resp.data.description,
          listAccyreplacement: resp.data.listAccyreplacement ? resp.data.listAccyreplacement : [],
          remainingProblems: resp.data.remainingProblems,
          failureCauseId: resp.data.causeKeywordsId,
          failureCauseName: resp.data.causeKeywords,
          processId: resp.data.maintKeywordsId,
          processName: resp.data.keywords,
        };

        // 是否展示换上换下
        changePrats = commonMethods.isEmpty(resp.data.listAccyreplacement)
                      && commonMethods.isEmpty(resp.data.failurePositions);

        // 是否展示遗留问题
        showRemianProblem = commonMethods.isEmpty(resp.data.remainingProblems);
      }

      const images = [];
      if (!flag && resp.data.picture) {
        this.failurePic = resp.data.picture;
        images.push({
          uri: `${incidentServer.getDownloadImg}/${resp.data.picture}?token=${global.__TOKEN_ACCESS__}`,
          type: 'multipart/form-data',
          name: `${new Date().getTime()}.png`,
        });
      }
      console.log('imagesList from server,', images);
      this.setState({
        ...data,
        ...otherInfo,
        changePrats: !changePrats,
        showRemianProblem: !showRemianProblem,
        images,
        selectedPartList,
      });
    } catch (error) {
      DeviceEventEmitter.emit('showLoading', false);
    }
    // alert('查询保存数据');
    // setTimeout(() => {
    //   DeviceEventEmitter.emit('showLoading', false);
    // }, 500);
  }

  addImage = (uri) => {
    this.failurePic = '';
    this.setState(produce(draft => {
      draft.images = [uri];
    }));
  }

  delImage = (index) => {
    this.failurePic = '';
    this.setState(produce(draft => {
      draft.images.splice(index, 1);
    }));
  }

  _selectCharge = () => {
    this._choiceConfirm = (item) => {
      if (this.type === 'radio') {
        this.setState({
          maintPerson: item[0].id,
          maintPersonName: item[0].name,
        });
      } else {
        let str = '';
        let idStr = '';
        item.forEach(it => {
          str += `${it.name},`;
          idStr += `${it.id},`;
        });
        str = str.substring(0, str.length - 1);
        this.setState({
          maintTeamMembername: str,
          maintTeamMember: idStr,
        });
      }
    };

    this.searchUri = `http://${host}/gateway/api-ms/system/organizations/${global.user.organization.id}/staffs/0`;
    this.type = 'radio';
    this.searHeaderTitle = '请选择责任人';
    this.searchNoHeader = true;
    this.setState({
      modalVisible: true,
    });
  }

  _selectMembers = () => {
    this._choiceConfirm = (item) => {
      if (this.type === 'radio') {
        this.setState({
          maintPerson: item[0].id,
          maintPersonName: item[0].name,
        });
      } else {
        let str = '';
        let idStr = '';
        item.forEach(it => {
          str += `${it.name},`;
          idStr += `${it.id},`;
        });
        str = str.substring(0, str.length - 1);
        this.setState({
          maintTeamMembername: str,
          maintTeamMember: idStr,
        });
      }
    };

    this.searchUri = `http://${host}/gateway/api-ms/system/organizations/${global.user.organization.id}/staffs/0`;
    this.type = 'checkbox';
    this.searchNoHeader = true;
    this.searHeaderTitle = '请选择团队人员';
    this.setState({
      modalChoiceMoreVisible: true,
    });
  }

  _cancelModal = () => {
    this.setState({
      modalVisible: false,
    });
  }

  _cancelChoiceMoreModal = () => {
    this.setState({
      modalChoiceMoreVisible: false,
    });
  }

  _hideSelect = () => {
    this.setState({
      showSelectIncidentPart: false,
    });
  }

  _hideMaterialSelect = () => {
    this.setState({
      showSelectMaterialList: false,
    });
  }

  _showAlert = (type, methodName) => {
    const obj = type === 'save' ? { msg: '是否保存？', status: '0' } : { msg: '是否提交？', status: '1' };
    Alert.alert(
      '提示',
      obj.msg,
      [
        {
          text: '否',
          style: 'cancel',
          onPress: () => {
          },
        },
        {
          text: '是',
          onPress: () => {
            this[methodName](obj.status);
          },
        },
      ],
    );
  }

  /**
   * @param {String} status 保存的信息 0 保存（草稿状态），1 提交
  */
  _submit = async (status) => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      let picUp;
      if (!this.failurePic && this.state.images.length) {
        picUp = await todoService.uploadPic(this.state.images);
        this.failurePic = picUp.data.fileId;
      }
      const failurePositions = [];
      this.state.selectedPartList.forEach(item => {
        failurePositions.push({
          failureId: this.props.id,
          splitItemId: item.splitItemId,
        });
      });
      // const picUp = await todoService.uploadPic(this.state.images);
      let mobileInfo = JSON.parse(JSON.stringify(this.props.mobileInfo));

      // mobileInfo.billCode = this.state.billCode; // 工作票号
      // mobileInfo.description = this.state.description; // 处理过程
      // mobileInfo.failureCause = this.state.failureCause; // 故障原因
      // mobileInfo.maintPerson = this.state.maintPerson; // 维修责任人
      // mobileInfo.maintPersonName = this.state.maintPersonName; // 维修责任人姓名
      // mobileInfo.maintTeamMember = this.state.maintTeamMember; // 维修团队
      // mobileInfo.maintTeamMembername = this.state.maintTeamMembername; // 维修团队
      // mobileInfo.maintOrgId = this.state.maintOrgId; // 维修责任班组
      // mobileInfo.remainingProblems = this.state.remainingProblems; // 遗留问题
      const { equipmentId, deviceMaintOrgId } = this.props;
      mobileInfo = Object.assign(mobileInfo, this.state, { status }, { equipmentId });
      mobileInfo.failurePositions = failurePositions;
      mobileInfo.picture = this.failurePic;
      mobileInfo.failureId = this.props.id;

      mobileInfo.causeKeywordsId = this.state.failureCauseId;
      mobileInfo.causeKeywords = this.state.failureCauseName;
      mobileInfo.maintKeywordsId = this.state.processId;
      mobileInfo.keywords = this.state.processName;

      mobileInfo.stepCode = '06';
      mobileInfo.safeOrgId = deviceMaintOrgId;
      const vlidate = await this._validateRequrie(mobileInfo);

      // 校验未通过
      if (!vlidate.flag && status === '1') { // 提交 校验
        UtilToast(vlidate.desc, 'danger');
        DeviceEventEmitter.emit('showLoading', false);
        // Toast.show({
        //   text: vlidate.desc,
        //   duration: 500,
        //   position: 'bottom',
        // });
        return;
      }
      const resp = await incidentServer.incidentHandle(mobileInfo);
      this._handleServerResponse(resp, status);
    } catch (error) {
      DeviceEventEmitter.emit('showLoading', false);
      console.log('维修完成:', error);
    }
  }

  _validateRequrie = async (data) => {
    // 工作票号校验
    // if (!data.billCode) {
    //   return {
    //     desc: '请填写工作票号！',
    //     flag: false,
    //   };
    // }

    // 故障原因校验
    if (!data.causeKeywordsId) {
      return {
        desc: '请选择故障原因！',
        flag: false,
      };
    }

    // // 故障原因补充说明校验
    // if (!data.failureCause) {
    //   return {
    //     desc: '请填写故障原因补充说明！',
    //     flag: false,
    //   };
    // }

    // 处理过程校验
    if (!data.maintKeywordsId) {
      return {
        desc: '请选择处理过程！',
        flag: false,
      };
    }

    // // 处理过程补充说明
    // if (!data.description) {
    //   return {
    //     desc: '请填写处理过程补充说明！',
    //     flag: false,
    //   };
    // }

    // 故障位置校验
    // if (data.failurePositions.length === 0) {
    //   return {
    //     desc: '请选择故障位置！',
    //     flag: false,
    //   };
    // }

    if (this.props.failureType != '08' && data.failurePositions.length === 0) {
      const resp = await incidentServer.getFirstLevePart(this.props.equipObjType);
      if (resp.data && resp.data.length) {
        return {
          desc: '请选择故障位置！',
          flag: false,
        };
      }
    }
    return {
      flag: true,
    };
  }

  _handleServerResponse = (resp, status) => {
    const msg = status === '1' ? '提交' : '保存';
    DeviceEventEmitter.emit('showLoading', false);
    if (resp.resultCode == '0') { // 状态码成功
      UtilToast(`${msg}成功`, 'success');
    } else {
      UtilToast(resp.resultMsg || `${msg}失败，请重试`, 'danger');
    }
    this.props.back();
  }

  _choiceConfirm = (item) => {
    if (this.type === 'radio') {
      this.setState({
        maintPerson: item[0].id,
        maintPersonName: item[0].name,
      });
    } else {
      let str = '';
      let idStr = '';
      item.forEach(it => {
        str += `${it.name},`;
        idStr += `${it.id},`;
      });
      str = str.substring(0, str.length - 1);
      this.setState({
        maintTeamMembername: str,
        maintTeamMember: idStr,
      });
    }
  }

  showBigImage = () => {
    DeviceEventEmitter.emit('showBigImage', { show: true, url: this.state.images[0].uri });
  }

  toQrcode = () => {
    // alert('打开扫码页面');
    global.navigation.navigate({
      routeName: 'Qrcode',
      params: {
        flag: 'part',
        equipObjType: this.props.equipObjType,
        equipmentId: this.props.equipmentId,
      },
    });
  }

  // 故障位置选择
  _showSelectIncidentPart = () => {
    console.log('故障位置选择~');
    this.setState({
      showSelectIncidentPart: true,
    });
  }

  _finishSelectPart = async (selectedList) => { // 故障位置选择结束
    if (selectedList && selectedList.length) {
      const material = selectedList[selectedList.length - 1];
      this.setState(preState => ({
        selectedPartList: preState.selectedPartList.concat(material),
      }));
    }
  }

  _getSelectedPartList = () => { // 展示已经选择的故障位置列表
    const list = [];
    const { selectedPartList } = this.state;
    for (let i = 0, len = selectedPartList.length; i < len; i += 1) {
      const item = selectedPartList[i];
      list.push(
        <View
          key={i}
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', margin: 4, flex: 1 }}>
            {`${item.description}`}
          </Text>
          <Icon
            style={{ marginRight: 4 }}
            name="closecircle"
            size={22}
            color="#a4a4a4"
            onPress={() => { this._removeItem(item, i); }}
          />
        </View>,
      );
    }
    return list;
  }

  _removeItem = (item, index) => {
    console.log('need remove item', item, index);
    this.setState(preState => {
      preState.selectedPartList.splice(index, 1);
      return ({
        selectedPartList: preState.selectedPartList,
      });
    });
  }

  _confirmMaterial = (data) => {
    console.log('selected material is ,', data);
    const up = { ...data[0], ...this.state.selectedMaterial };
    const down = { ...data[0], ...this.state.selectedMaterial };
    up.action = '5';
    down.action = '6';
    up.changeQty = 1;
    down.changeQty = 1;
    const listAccyreplacement = [up, down];
    this.setState({
      showSelectMaterialList: false,
      listAccyreplacement,
    });
  }

  _removeChangeParts = (index) => {
    this.setState(preState => {
      preState.listAccyreplacement.splice(index, 1);
      return ({
        listAccyreplacement: preState.listAccyreplacement,
      });
    });
  }

  /**
   * @param {String} type up 返回换上列表 down 返回换下列表
  */
  showChangeParts = () => { // 生成换上换下列表
    console.log('生成换上列表:');
    const down = [];
    let downIndex = 0;
    const up = [];
    let upIndex = 0;
    if (!this.state.listAccyreplacement) {
      return {
        down,
        up,
      };
    }
    for (let i = 0, len = this.state.listAccyreplacement.length; i < len; i += 1) {
      const item = this.state.listAccyreplacement[i];
      if (item.action === '5') { // 换上
        up.push(
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            key={i}
          >
            <Text style={{ color: 'white', margin: 4, flex: 1 }}>
              {`${upIndex += 1}、${item.description}@${item.materialName} ${item.lotCode ? item.lotCode : '首次换上'}`}
              <Text style={styles.partsNumBage}>{`  x${item.changeQty}`}</Text>
            </Text>
            <Icon
              style={{ marginRight: 4 }}
              name="closecircle"
              size={22}
              color="#a4a4a4"
              onPress={() => { this._removeChangeParts(i); }}
            />
          </View>,
        );
      } else if (item.action === '6') { // 换下
        down.push(
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            key={i}
          >
            <Text style={{ color: 'white', margin: 4, flex: 1 }}>
              {`${downIndex += 1}、${item.description}@${item.materialName} ${item.lotCode ? item.lotCode : '首次换下'}`}
            </Text>
            <Icon
              style={{ marginRight: 4 }}
              name="closecircle"
              size={22}
              color="#a4a4a4"
              onPress={() => { this._removeChangeParts(i); }}
            />
          </View>,
        );
      }
    }
    return {
      down,
      up,
    };
  }

  // _checkboxClick = () => {
  //   this.setState({
  //     showRemianProblem: !this.state.showRemianProblem,
  //   });
  // }

  searchUri = '127.0.0.1';

  searchNoHeader = false;

  searHeaderTitle = '请选择';

  searchPlaceholder = '请选择';

  extraInfo; // 关键字搜索附加参数

  extraAddkeywordInfo; // 新增关键字搜索附加参数

  // 点击故障原因
  incidentReason = () => {
    this._choiceConfirm = (it) => {
      this.setState({ failureCauseId: it[0].id, failureCauseName: it[0].name, processId: '', processName: '' });
    };
    this.searchUri = 'maintainCompleteIncidentReasonUrl';
    this.searchNoHeader = false;
    this.searchPlaceholder = '请输入故障原因关键字';
    this.extraInfo = { failureKeywordsId: this.props.failureKeywordsId };
    this.extraAddkeywordInfo = { active: 0, createdBy: global.user.id, failureKeywordsId: this.props.failureKeywordsId };
    this._showKeywordModal();
  }

  // 点击处理过程
  process = () => {
    if (this.state.failureCauseId) {
      this._choiceConfirm = (it) => {
        this.setState({ processId: it[0].id, processName: it[0].name });
      };
      this.searchUri = 'maintainCompleteProcessUrl';
      this.searchNoHeader = false;
      this.searchPlaceholder = '请输入处理过程关键字';
      this.extraInfo = { causeKeywordsId: this.state.failureCauseId };
      this.extraAddkeywordInfo = { active: 0, createdBy: global.user.id, causeKeywordsId: this.state.failureCauseId };
      this._showKeywordModal();
    } else {
      UtilToast('请先选择故障原因！', 'danger');
    }
  }

  _showKeywordModal = () => {
    this.setState({
      keywordModalVisible: true,
    });
  }

  _cancelKeywordModal = () => {
    this.setState({ keywordModalVisible: false });
  }

  render() {
    const { down, up } = this.showChangeParts();

    console.log('images:...', this.state.images);
    return (
      <View style={styles.conatiner}>
        {this.state.keywordModalVisible && (
          <FormSearchKeyword
            onClose={this._cancelKeywordModal}
            searchUri={this.searchUri}
            type="radio"
            title={this.searHeaderTitle}
            searchNoHeader={this.searchNoHeader}
            choiceConfirm={this._choiceConfirm}
            extraInfo={this.extraInfo}
            extraAddkeywordInfo={this.extraAddkeywordInfo}
            searchPlaceholder={this.searchPlaceholder}
          />
        )}
        <View>
          {this.state.modalVisible && (
            <FormSearchChoiceNoHeader
              onClose={this._cancelModal}
              searchUri={this.searchUri}
              type={this.type}
              title={this.searHeaderTitle}
              searchNoHeader={this.searchNoHeader}
              choiceConfirm={this._choiceConfirm}
            />
          )}
        </View>
        <View>
          {this.state.modalChoiceMoreVisible && (
            <FormSearchChoiceMore
              onClose={this._cancelChoiceMoreModal}
              searchUri={this.searchUri}
              type={this.type}
              title={this.searHeaderTitle}
              searchNoHeader={this.searchNoHeader}
              choiceConfirm={this._choiceConfirm}
            />
          )}
        </View>
        <View>
          {this.state.showSelectIncidentPart && (
            <SelectPart
              show={this.state.showSelectIncidentPart}
              hide={this._hideSelect}
              equTypeId={this.props.equipObjType}
              equipmentId={this.props.equipmentId}
              finish={this._finishSelectPart}
            />
          )}
        </View>
        <View style={{ flex: 1 }}>
          <ScrollView style={{ backgroundColor: Theme.myPrimary }}>
            <View style={styles.borderGrey}>
              <View style={{ marginLeft: 10, marginRight: 10, marginBottom: 8, flex: 1, padding: 10, backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 4 }}>
                <Text style={{ color: 'white' }}>基本信息</Text>
              </View>
              <View style={styles.oneItem}>
                <Text style={[styles.leftContent, styles.textFont]}>维修责任人</Text>
                <View style={[styles.rightContent, styles.showSelect]}>
                  <Text style={[styles.rightContent, styles.textFont]}>
                    {this.state.maintPersonName}
                  </Text>
                  {/* <Text
                    style={styles.selectText}
                    onPress={() => this._selectCharge()}
                  >
                    选择
                  </Text> */}
                  <TouchableHighlight
                    activeOpacity={0.8}
                    style={styles.selectBtn}
                    onPress={() => this._selectCharge()}
                  >
                    <Text style={[styles.textFont]}>选择</Text>
                  </TouchableHighlight>
                </View>
              </View>
              <View style={styles.oneItem}>
                <Text style={[styles.leftContent, styles.textFont]}>维修团队人员</Text>
                <View style={[styles.rightContent, styles.showSelect]}>
                  <Text style={[styles.rightContent, styles.textFont]}>
                    {this.state.maintTeamMembername}
                  </Text>
                  {/* <Text
                    style={styles.selectText}
                    onPress={() => this._selectMembers()}
                  >
                    选择
                  </Text> */}
                  <TouchableHighlight
                    activeOpacity={0.8}
                    style={styles.selectBtn}
                    onPress={() => this._selectMembers()}
                  >
                    <Text style={[styles.textFont]}>选择</Text>
                  </TouchableHighlight>
                </View>
              </View>
              <View style={styles.marginTop5}>
                {/* <Text style={[styles.leftContent, styles.textFont]}>工作票号</Text>
                <TextInput
                  style={[styles.rightContent, styles.textFont, styles.inputCls]}
                  value={this.state.billCode}
                  onChangeText={billCode => this.setState({ billCode })}
                /> */}
                <Text style={[styles.leftContent, styles.textFont]}>工作票号</Text>
                <Textarea
                  rowSpan={5}
                  bordered
                  style={[styles.textAreaStyle]}
                  placeholder="请输入工作票号"
                  placeholderTextColor="#ffffff"
                  value={this.state.billCode}
                  onChangeText={billCode => this.setState({ billCode })}
                />
              </View>
              <View style={[styles.oneItem, { marginTop: 15 }]}>
                <Text style={[styles.leftContent, styles.textFont]}>故障原因</Text>
                <View style={[styles.rightContent, styles.showSelect]}>
                  <Text style={[styles.rightContent, styles.textFont]}>
                    {this.state.failureCauseName}
                  </Text>
                  {/* <Text
                    style={styles.selectText}
                    onPress={() => this.incidentReason()}
                  >
                    选择
                  </Text> */}
                  <TouchableHighlight
                    activeOpacity={0.8}
                    style={styles.selectBtn}
                    onPress={() => this.incidentReason()}
                  >
                    <Text style={[styles.textFont]}>选择</Text>
                  </TouchableHighlight>
                </View>
              </View>
              <View style={styles.marginTop5}>
                <Text style={[styles.leftContent, styles.textFont]}>原因补充说明</Text>
                <Textarea
                  rowSpan={5}
                  bordered
                  style={[styles.textAreaStyle]}
                  placeholder="请输入原因补充说明"
                  placeholderTextColor="#ffffff"
                  value={this.state.failureCause}
                  onChangeText={failureCause => this.setState({ failureCause })}
                />
              </View>
              <View style={[styles.oneItem, { marginTop: 15 }]}>
                <Text style={[styles.leftContent, styles.textFont]}>处理过程</Text>
                <View style={[styles.rightContent, styles.showSelect]}>
                  <Text style={[styles.rightContent, styles.textFont]}>
                    {this.state.processName}
                  </Text>
                  {/* <Text
                    style={styles.selectText}
                    onPress={() => this.process()}
                  >
                    选择
                  </Text> */}
                  <TouchableHighlight
                    activeOpacity={0.8}
                    style={styles.selectBtn}
                    onPress={() => this.process()}
                  >
                    <Text style={[styles.textFont]}>选择</Text>
                  </TouchableHighlight>
                </View>
              </View>
              <View style={styles.marginTop5}>
                <Text style={[styles.leftContent, styles.textFont]}>
                  处理补充说明
                </Text>
                <Textarea
                  rowSpan={5}
                  bordered
                  style={[styles.textAreaStyle]}
                  placeholder="请输入处理补充说明"
                  placeholderTextColor="#ffffff"
                  value={this.state.description}
                  onChangeText={description => this.setState({ description })}
                />
              </View>
              <View style={styles.marginTop5}>
                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={[styles.remainProblemContent, styles.textFont]}>
                    遗留问题
                  </Text>
                  <CheckBox
                    style={styles.checkBox}
                    checked={this.state.showRemianProblem}
                    onCheckChange={(showRemianProblem) => this.setState({ showRemianProblem })}
                  />
                </View>
                {this.state.showRemianProblem && (
                  <Textarea
                    rowSpan={5}
                    bordered
                    style={styles.textAreaStyle}
                    placeholder="请输入遗留问题"
                    placeholderTextColor="#ffffff"
                    value={this.state.remainingProblems}
                    onChangeText={remainingProblems => this.setState({ remainingProblems })}
                  />
                )}
              </View>
            </View>
            <View style={{ marginLeft: 10, marginRight: 10, flex: 1, padding: 10, backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 4 }}>
              <Text style={{ color: 'white' }}>备件信息</Text>
            </View>
            <View style={[
              styles.remainProblemContent,
              styles.borderGrey]}
            >
              <View>
                <View style={styles.selectIncidentPart}>
                  <Text style={[styles.textFont]}>故障位置</Text>
                  <TouchableHighlight
                    activeOpacity={0.8}
                    style={styles.selectBtn}
                    onPress={this._showSelectIncidentPart}
                  >
                    <Text style={[styles.textFont]}>选择</Text>
                  </TouchableHighlight>
                </View>
                <View style={{ marginTop: 4, marginLeft: 8 }}>
                  {this._getSelectedPartList()}
                </View>
                <View style={{ marginTop: 15 }}>
                  <View style={styles.changeParts}>
                    <Text style={[styles.textFont]}>换上</Text>
                    {!this.state.hasChoicePart && (
                      <ZlstIcon
                        onPress={this.toQrcode}
                        name="saoma"
                        size={20}
                        color="white"
                        style={{ marginLeft: 20 }}
                      />)}
                  </View>
                  <View style={{ marginLeft: 8 }}>{up}</View>
                </View>
                <View style={{ marginTop: 15 }}>
                  <View style={styles.changeParts}>
                    <Text style={[styles.textFont]}>换下</Text>
                  </View>
                  <View style={{ marginLeft: 8 }}>{down}</View>
                </View>
              </View>
            </View>
            <View style={{ marginLeft: 10, marginRight: 10, flex: 1, padding: 10, backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 4 }}>
              <Text style={{ color: 'white' }}>维修照片</Text>
            </View>
            <View style={[styles.borderGrey, { paddingLeft: 20, paddingRight: 20 }]}>
              <View>
                <FormTakephoto
                  datas={this.state.images}
                  addImage={this.addImage}
                  delImage={this.delImage}
                  showBigImage={this.showBigImage}
                />
              </View>
            </View>
          </ScrollView>
        </View>
        <View>
          <Image
            source={require('../../../../../assets/images/btn-cut-line-xxx.png')}
            style={{ width: deviceWidth, height: 2, alignItems: 'center' }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
          <View style={{ display: 'flex', flexDirection: 'row' }}>
            <Text
              onPress={() => this._showAlert('save', '_submit')}
              style={[styles.submitBtn, styles.textFont]}
            >
              保存
            </Text>
            <Text
              onPress={() => this._showAlert('submit', '_submit')}
              style={[styles.submitBtn, styles.textFont]}
            >
              提交
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

export default MaintainComplete;
